<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="hidden" id="user_id" value="{{.user_id}}"/>
<input type="hidden" id="username" value="{{.username}}"/>
<input type="hidden" id="send_id" value="{{.send_id}}"/>
<div style="width: 300px;height: 500px;border:2px solid black" id = "im">

</div>

<input type="text" id="texts">
<input type="file" id="img">
<button onclick="sendMessage()">发送消息</button>
<script>
  // 前端代码示例（JavaScript）
  var user_id = document.getElementById("user_id").value
  var send_id = document.getElementById("send_id").value
  // 创建WebSocket连接
  url = 'ws://127.0.0.1:8080/im_room?id='+user_id+"&send_id="+send_id
  const socket = new WebSocket(url);

  // 监听WebSocket连接建立事件
  socket.onopen = () => {
    console.log('WebSocket连接已打开');
  };

  // 监听WebSocket接收消息事件
  socket.onmessage = (event) => {
    const message = event.data;
    console.log('收到消息:', message);
    // 处理接收到的消息...
    var username = document.getElementById("username").value
    var text = message
    var d = document.getElementById('im');//通过id获取div节点对象
    d.innerHTML += '<p>'+username+":" + text + '</p>';
  };

  // 监听WebSocket连接关闭事件
  socket.onclose = () => {
    console.log('WebSocket连接已关闭');
  };

  // 发送消息
  function sendMessage() {
    var message = document.getElementById("texts").value
    socket.send(message); // 发送消息给服务器
    var text = message
    var d = document.getElementById('im');//通过id获取div节点对象
    d.innerHTML += '<p>我：' + text + '</p>';
  }
</script>
</body>
</html>